<template>
  <el-dialog
    class="eldialog"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    top="10vh"
    width="60%"
    :close-on-press-escape="false"
    :before-close="closeVisible"
  >
    <table border="1" class="myTable">
        <thead>
            <tr style="background:skyblue;">
                <td colspan="4" style="text-align:left;color:#fff;font-size:18px;">
                    一、大组工网网站
                </td>
            </tr>
            <tr>
                <td style="width:150px;">市级党委组织部网站名称</td>
                <td colspan="3">
                    <el-input v-model="netName"/>
                </td>
            </tr>
            <tr>
                <td>市级党委组织部网站域名/IP</td>
                <td colspan="3">
                    <el-input v-model="netIp"/>
                </td>
            </tr>
            <tr>
                <td>市级党委组织部网站部署情况</td>
                <td colspan="3">
                    <el-input v-model="netArrange"/>
                </td>
            </tr>
            <tr>
                <td>网络技术路线</td>
                <td colspan="3">
                    <el-input v-model="netWay"/>
                </td>
            </tr>
            <tr>
                <td>管理制度</td>
                <td colspan="3" style="display:flex;">
                    <el-select v-model="isManage" @change="handleIsManageChange" placeholder="请选择" style="width:200px;">
                        <el-option
                            v-for="item in optionsIsManage"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <el-upload class="upload-demo" 
                        :action="uploadUrl" 
                        :on-preview="handlePreview"
                        :before-upload="before_upload"
                        :on-success="uploadSuccess"
                        :multiple="fileMultiple"
                        :limit="1" :file-list="fileManageList">
                <el-button type="primary">(请上传电子版)</el-button>
                <div slot="tip" class="el-upload__tip">
                    允许上传pdf格式,且不超过100MB
                </div>
                </el-upload>
               </td>
            </tr>
            <tr>
                <td>网站管理责任科(处)室</td>
                <td colspan="3">
                    <el-input v-model="netOrg"/>
                </td>
            </tr>
            <tr>
                <td>管理人员</td>
                <td colspan="2">
                    <p style="display:flex;align-items:center;justify-content:flex-end;">
                        姓名：<el-input v-model="personName" style="width:400px;text-align:right;"/>
                    </p>
                    <p style="display:flex;align-items:center;margin-top:5px;justify-content:flex-end;">
                        单位及职务：<el-input v-model="jobPost" style="width:400px;text-align:right;"/>
                    </p>
                    <p style="display:flex;align-items:center;margin-top:5px;justify-content:flex-end;">
                        办公电话：<el-input v-model="telPhone" style="width:400px;text-align:right;"/>
                    </p>
                    <p style="display:flex;align-items:center;margin-top:5px;justify-content:flex-end;">
                        手机号码：<el-input v-model="phone" style="width:400px;text-align:right;"/>
                    </p>
                </td>
            </tr>
            <tr>
                <td>访问中组部网站/山东组织工作网情况</td>
                <td colspan="2">
                    <p class="classyang">是否使用国产化计算机访问：
                        <el-select v-model="isLoacalizationPc" placeholder="请选择" style="width:200px;">
                            <el-option
                                v-for="item in optionsIsLoacalizationPc"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </p>
                    <p class="classyang">能否正常访问：
                        <el-select v-model="isOk" placeholder="请选择" style="width:200px;">
                            <el-option
                                v-for="item in optionsIsok"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </p>
                    <p class="classyang">
                        问题：<el-input v-model="reasonPc" style="width:400px"/>
                    </p>
                </td>
            </tr>
            <tr>
                <td>国产化情况</td>
                <td colspan="2">
                    <p class="classyang">是否国产化：
                        <el-select v-model="isLoacalization" placeholder="请选择" style="width:200px;">
                            <el-option
                                v-for="item in optionsIsLoacalization"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </p>
                    <p class="classyang">能否正常访问：
                        <el-select v-model="isUsedOk" placeholder="请选择" style="width:200px;">
                            <el-option
                                v-for="item in optionsIsUsedOk"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </p>
                    <p class="classyang">问题：<el-input v-model="reasonLoac" style="width:400px"/></p>
                </td>
            </tr>
            <tr style="background:skyblue;">
                <td colspan="4" style="text-align:left;color:#fff;font-size:18px;">
                    二、电子邮件系统
                </td>
            </tr>
            <tr>
                <td>市级党委组织部邮件系统域名/IP</td>
                <td colspan="3">
                    <el-input v-model="emailIp"/>
                </td>
            </tr>
            <tr>
                <td>邮件系统名称/型号</td>
                <td colspan="3"><el-input v-model="emailName"/></td>
            </tr>
            <tr>
                <td>管理制度</td>
                <td style="display:flex;">
                    <el-select v-model="emailIsManage" @change="handlEmaileManageChange" placeholder="请选择" style="width:200px;">
                        <el-option
                            v-for="item in optionsEmailIsManage"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <el-upload class="upload-demo" 
                            :action="uploadUrl" 
                            :on-preview="handlePreviewEmail"
                            :on-success="uploadSuccessEmail"
                            :multiple="fileEmailMultiple"
                            :before-upload="before_uploadEmail"
                            :limit="1" :file-list="fileEmailList">
                    <el-button type="primary">(请提供电子版)</el-button>
                    <div slot="tip" class="el-upload__tip">
                        允许上传pdf格式,且不超过100MB
                    </div>
                    </el-upload>
                </td>
                
            </tr>
            <tr>
                <td>邮件管理责任处室</td>
                <td><el-input v-model="emailOrg"/></td>
                <td>联系人及电话</td>
                <td><el-input v-model="personPhone"/></td>
            </tr>
            <tr>
                <td>开设邮箱数</td>
                <td><el-input v-model="emailNum"/></td>
                <td>邮箱分配范围</td>
                <td>
                    <p style="display:flex;align-items:center;">市级：
                        <el-select v-model="emailCity" placeholder="请选择" style="width:200px;">
                        <el-option
                            v-for="item in optionsEmailCity"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                    </p>
                    <p style="display:flex;align-items:center;margin-top:5px;">县级：
                        <el-select v-model="emailContry" placeholder="请选择" style="width:200px;">
                        <el-option
                            v-for="item in optionsEmailContry"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                        </el-select>
                    </p>
                </td>
            </tr>
            <tr>
                <td>访问中组部大组工网邮件系统/省委组织部组工网邮件系统情况</td>
                <td colspan="2">
                    <p class="classyang">是否使用国产化计算机访问：
                        <el-select v-model="emailLocationPc" placeholder="请选择" style="width:200px;">
                        <el-option
                            v-for="item in optionsEmailLocationPc"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                    </p>
                    <p class="classyang">能否正常访问：
                        <el-select v-model="emailIsOk" placeholder="请选择" style="width:200px;">
                        <el-option
                            v-for="item in optionsEmailIsOk"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                    </p>
                    <p class="classyang">问题：<el-input v-model="emailReason" style="width:400px"/></p>
                </td>
            </tr>
            <tr style="background:skyblue;">
                <td colspan="4" style="text-align:left;color:#fff;font-size:18px;">
                    三、问题建议
                </td>
            </tr>
            <tr style="height: 80px;">
                <td colspan="4"  style="text-align:left">
                   <el-input type="textarea" :rows="4" v-model="remark"/>
                </td>
            </tr>
        </thead>
    </table>
    <span slot="footer" class="dialog-footer">
            <el-button @click="closeVisible()">取 消</el-button>
            <el-button type="primary" @click="submitForm()">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import webapp from "@/config/webapp";
import {getInfo,getInfoSave,getInfoUpdate} from "@/api/datacentersg/personnelPut/personnelPut.js"
import store from "@/store";
class Photo {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
export default {
  data() {
    return {
      visible: false,
      title: "",
      netName:"",
      netIp:"",
      netArrange:"",
      netWay:"",
      isManage:"",//[]
      netOrg:"",
      personName:"",
      jobPost:"",
      telPhone:"",
      phone:"",
      isLoacalizationPc:"",//[]
      isOk:"",//[]
      reasonPc:"",
      isLoacalization:"",//[]
      isUsedOk:'',//[]
      reasonLoac:"",
      emailIp:"",
      emailName:"",
      emailIsManage:'',//[]
      emailOrg:'',
      personPhone:"",
      emailNum:"",
      emailCity:"",//[]
      emailContry:"",//[]
      emailLocationPc:"",//[]
      emailIsOk:"",//[]
      emailReason:"",
      remark:"",
      optionsIsManage:[
        {
            value: 0,
            label: '暂无'
        },
        {
            value: 1,
            label: '有'
        },
      ],
      optionsIsLoacalizationPc:[
      {
            value: 0,
            label: '否'
        },
        {
            value: 1,
            label: '是'
        },
      ],
      optionsIsok:[
      {
            value: 0,
            label: '否'
        },
        {
            value: 1,
            label: '是'
        },
      ],
      optionsIsLoacalization:[
        {
            value: 0,
            label: '否'
        },
        {
            value: 1,
            label: '是'
        },
      ],
      optionsIsUsedOk:[
        {
            value: 0,
            label: '否'
        },
        {
            value: 1,
            label: '是'
        },
      ],
      optionsEmailIsManage:[
        {
            value: 0,
            label: '暂无'
        },
        {
            value: 1,
            label: '有'
        },
      ],
      optionsEmailCity:[
        {
            value: 0,
            label: '机构'
        },
        {
            value: 1,
            label: '全员'
        },
      ],
      optionsEmailContry:[
        {
            value: 0,
            label: '机构'
        },
        {
            value: 1,
            label: '全员'
        },
      ],
      optionsEmailLocationPc:[
       {
            value: 0,
            label: '否'
        },
        {
            value: 1,
            label: '是'
        },
      ],
      optionsEmailIsOk:[
      {
            value: 0,
            label: '否'
        },
        {
            value: 1,
            label: '是'
        },
      ],
      uploadUrl:webapp.uploadUrl,
      fileMultiple:false,
      fileUrl:"",
      emailFile:"",
      fileEmailMultiple:false,
      fileManageList:[],
      fileEmailList:[],
      infoRowId:"",
    };
  },
  methods: {
    infoInit(title,infoRow) {
        this.visible = true;
        this.title = title;
        if(this.title == "编辑"){
            this.infoRowId = infoRow.id;
            this.getInfoDetail();
        }
    },
    getInfoDetail(){
       const params ={
        userId:store.getters.user_id.toString(),
        token:store.getters.token.toString(),
        data:{
            id:this.infoRowId,
        }
       }
       getInfo(params).then((result) =>{
           if(result.result){
                this.netName = result.resultdata.netName;
                this.netIp = result.resultdata.netIp;
                this.netArrange = result.resultdata.netArrange;
                this.netWay = result.resultdata.netWay;
                this.isManage = result.resultdata.isManage;
                this.netOrg = result.resultdata.netOrg;
                this.personName = result.resultdata.personName;
                this.jobPost = result.resultdata.jobPost;
                this.telPhone = result.resultdata.telPhone;
                this.phone = result.resultdata.phone;
                this.isLoacalizationPc = result.resultdata.isLoacalizationPc;
                this.isOk = result.resultdata.isOk;
                this.reasonPc = result.resultdata.reasonPc;
                this.isLoacalization = result.resultdata.isLoacalization;
                this.isUsedOk = result.resultdata.isUsedOk;
                this.reasonLoac = result.resultdata.reasonLoac;
                this.emailIp = result.resultdata.emailIp;
                this.emailName = result.resultdata.emailName;
                this.emailIsManage = result.resultdata.emailIsManage;
                this.emailOrg = result.resultdata.emailOrg;
                this.personPhone = result.resultdata.personPhone;
                this.emailNum = result.resultdata.emailNum;
                this.emailCity = result.resultdata.emailCity;
                this.emailContry = result.resultdata.emailContry;
                this.emailLocationPc = result.resultdata.emailLocationPc;
                this.emailIsOk = result.resultdata.emailIsOk;
                this.emailReason = result.resultdata.emailReason;
                this.remark = result.resultdata.remark;
                this.fileUrl = result.resultdata.fileUrl;
                this.emailFile = result.resultdata.emailFile;
                const photoList = [];
                if (result.resultdata.fileUrl) {
                    photoList.push(new Photo("管理制度网站附件", result.resultdata.fileUrl));
                } else {
                    this.fileManageList = [];
                }
                this.fileManageList = photoList;

                const photoListEmail = [];
                if (result.resultdata.emailFile) {
                    photoListEmail.push(new Photo("管理制度邮件附件", result.resultdata.emailFile));
                } else {
                    this.fileEmailList = [];
                }
                this.fileEmailList = photoListEmail;
            }
       })
    },
    handleIsManageChange(value){
       if(value === 0){
          this.fileManageList = [];
          this.fileUrl = "";
       }
    },
    handlEmaileManageChange(value){
        if(value === 0){
            this.fileEmailList = [];
            this.emailFile = "";
        }
    },
    submitForm(){
        if(this.title === "新增"){
            const params = {
                userId:store.getters.user_id.toString(),
                token:store.getters.token.toString(),
                data:{
                    netName:this.netName,
                    netIp:this.netIp,
                    netArrange:this.netArrange,
                    netWay:this.netWay,
                    isManage:this.isManage,
                    netOrg:this.netOrg,
                    personName:this.personName,
                    jobPost:this.jobPost,
                    telPhone:this.telPhone,
                    phone:this.phone,
                    isLoacalizationPc:this.isLoacalizationPc,
                    isOk:this.isOk,
                    reasonPc:this.reasonPc,
                    isLoacalization:this.isLoacalization,
                    isUsedOk:this.isUsedOk,
                    reasonLoac:this.reasonLoac,
                    emailIp:this.emailIp,
                    emailName:this.emailName,
                    emailIsManage:this.emailIsManage,
                    emailOrg:this.emailOrg,
                    personPhone:this.personPhone,
                    emailNum:this.emailNum,
                    emailCity:this.emailCity,
                    emailContry:this.emailContry,
                    emailLocationPc:this.emailLocationPc,
                    emailIsOk:this.emailIsOk,
                    emailReason:this.emailReason,
                    remark:this.remark,
                    fileUrl:this.fileUrl,
                    emailFile:this.emailFile,
                }
            }
            getInfoSave(params).then((result) => {
                if(result.result){
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.closeVisible();
                    this.$emit("initData");
                }
            })

        }else if(this.title === "编辑"){
            const params = {
                userId:store.getters.user_id.toString(),
                token:store.getters.token.toString(),
                data:{
                    id:this.infoRowId,
                    netName:this.netName,
                    netIp:this.netIp,
                    netArrange:this.netArrange,
                    netWay:this.netWay,
                    isManage:this.isManage,
                    netOrg:this.netOrg,
                    personName:this.personName,
                    jobPost:this.jobPost,
                    telPhone:this.telPhone,
                    phone:this.phone,
                    isLoacalizationPc:this.isLoacalizationPc,
                    isOk:this.isOk,
                    reasonPc:this.reasonPc,
                    isLoacalization:this.isLoacalization,
                    isUsedOk:this.isUsedOk,
                    reasonLoac:this.reasonLoac,
                    emailIp:this.emailIp,
                    emailName:this.emailName,
                    emailIsManage:this.emailIsManage,
                    emailOrg:this.emailOrg,
                    personPhone:this.personPhone,
                    emailNum:this.emailNum,
                    emailCity:this.emailCity,
                    emailContry:this.emailContry,
                    emailLocationPc:this.emailLocationPc,
                    emailIsOk:this.emailIsOk,
                    emailReason:this.emailReason,
                    remark:this.remark,
                    fileUrl:this.fileUrl,
                    emailFile:this.emailFile,
                }
            }
            getInfoUpdate(params).then((result) => {
                if(result.result){
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.closeVisible();
                    this.$emit("initData");
                }
            })
        }
    },
    before_upload(file) {
        console.log(file,"filename");
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(fileType);
        // 判断文件名的类型，允许多种就判断多个
        if (fileType == 'pdf') {
            console.log(file);
        } else {
            this.$message({
                message: '文件类型必须为pdf格式',
                type: 'warning'
            });
            // 返回false 就不会执行上传操作了
            return false
        }
    },
    handlePreview(file) {//点击fileList获取里面的url，可以直接在里面进行点击打开
      window.open(file.url);
    },
    uploadSuccess(response, file, fileList){
      if (response.success) {
        this.fileUrl = response.url;
      }
    },
    handlePreviewEmail(file) {
        window.open(file.url);
    },
    uploadSuccessEmail(response, file, fileList){ 
      if (response.success) {
        this.emailFile = response.url;
      }
    },
    before_uploadEmail(file) {
        console.log(file,"filename");
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(fileType);
        // 判断文件名的类型，允许多种就判断多个
        if (fileType == 'pdf') {
            console.log(file);
        } else {
            this.$message({
                message: '文件类型必须为pdf格式',
                type: 'warning'
            });
            // 返回false 就不会执行上传操作了
            return false
        }
    },
    closeVisible() {
        this.visible = false;
        this.infoRowId = "";
        this.netName = "";
        this.emailFile="";
        this.fileUrl ="";
        this.netIp = "";
        this.netArrange = "";
        this.netWay = "";
        this.isManage = "";
        this.netOrg = "";
        this.personName = "";
        this.jobPost = "";
        this.telPhone = "";
        this.phone = "";
        this.isLoacalizationPc = "";
        this.isOk = "";
        this.reasonPc = "";
        this.isLoacalization = "";
        this.isUsedOk = "";
        this.reasonLoac = "";
        this.emailIp = "";
        this.emailName = "";
        this.emailIsManage = "";
        this.emailOrg = "";
        this.personPhone = "";
        this.emailNum = "";
        this.emailCity = "";
        this.emailContry = "";
        this.emailLocationPc = "";
        this.emailIsOk = "";
        this.emailReason = "";
        this.remark = "";
        this.fileList = [];
        this.fileEmailList = [];
    },
  },
};
</script>

<style scoped>
.myTable {
  width: 100%;
  border:none;
  margin-bottom: 10px;
  border-spacing: 0;
}

.myTable tbody {
  width: 100%;
}
.myTable .borderNone {
  border-left: none;
}

.myTable td {
  word-wrap: break-word;
  font-size: 14px;
  text-align: center;
  padding: 5px 10px;
  border:none;
}
.classyang{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-top:5px;
}
</style>